<template>
  <div>
    <h3>beforeCreate</h3>
    <span>{{beforeCreate}}</span>
    <hr/>
    <h3>created:</h3>
    <span>{{created}}</span>
    <hr/>
    <h3>beforeMount:</h3>
    <span>{{beforeMount}}</span>
    <hr/>
    <h3>mounted:</h3>
    <span>{{mounted}}</span>
    <hr/>
    <h3>beforeUpdate:</h3>
    <span>{{beforeUpdate}}</span>
    <hr/>
    <h3>updated:</h3>
    <span>{{updated}}</span>
    <hr/>
    <h3>activated:</h3>
    <span>{{activated}}</span>
    <hr/>
    <h3>deactivated:</h3>
    <span>{{deactivated}}</span>
    <hr/>
    <h3>beforeDestory:</h3>
    <span>{{beforeDestory}}</span>
    <hr/>
    <h3>destoryed:</h3>
    <span>{{destroyed}}</span>
    <hr/>
  </div>
</template>

<script>
export default {
  name: "VueLife",
  data() {
    return {
      beforeCreate: "我是beforeCreatdata,在这里 data、computed、watch、methods上的方法和数据均不能访问",
      created: "",
      mounted: '',
      beforeUpdate: '',
      berofeMount: '我是beforeMount,有了编译的模板,并且可以找到对应的模板,编译成render函数',
      updated: '',
      activated: '我是actived,在使用<keep-alive></keep-alive>对组件进行缓存的时候,created函数不会再次执行,这个时候我们使用actived做在组件加载时需要的操作',
      deactivated: '我是deactived,在将<keep-alive></keep-alive>组件被移除时使用',
      beforeDestory: '我是beforeDestory,我在组件被销毁之前执行,可以用于清除定时器,解绑全局事件,销毁插件对象',
      destroyed: '我是destory,组件已被销毁,不可对组件进行操作'
    };
  },
  beforeCreate() {
    console.log(
      "我是beforeCreatdata,在这里 data、computed、watch、methods上的方法和数据均不能访问"
    );
  },
  created() {
    this.created =
      "我是created函数,我可以对data、computed、watch、methods上的数据访问,但是因为这里还没有挂载dom,不可以访问$el,$ref,若是需要对dom进行操作,一定要放在Vue.nextTick()的回调函数中";
  },
  beforeMount() {
    this.beforeMount = '我是beforeMount,有了编译的模板,并且可以找到对应的模板,编译成render函数'
  },
  mounted() {
    this.mounted = '我是mounted函数,这里完成了vm.$el和双向绑定,可访问$ref,可以向后台发请求'
  },
  beforeUpdate() {
    this.beforeUpdate = '我是beforeUpdate,数据更新之前的操作,可以手动移除事件的监听器'
  },
  updated() {
    this.updated = '我是updated,完成虚拟dom的渲染组件dom更新完成,可以对dom进行操作,但是这里有个注意点,这里不要对数据进行操作,否则会陷入死循环'
  },
  activated(){
    this.active = '我是actived,在使用<keep-alive></keep-alive>对组件进行缓存的时候,created函数不会再次执行,这个时候我们使用actived做在组件加载时需要的操作'
  },
  deactivated() {
    this.deactivated = '我是deactived,在将<keep-alive></keep-alive>组件被移除时使用'
  },
  beforeDestory() {
    this.beforeDestory = '我是beforeDestory,我在组件被销毁之前执行,可以用于清除定时器,解绑全局事件,销毁插件对象'
  },
  destroyed() {
    this.destroyed = '我是destory,组件已被销毁,不可对组件进行操作'
  }
};
</script>

<style scoped>
hr{
  margin-bottom: 20px;
  margin-top: 10px;
}
div h3{
  margin-left: 20px;
}
div span{
  margin-left: 35px;
  margin-top: 5px;
}
</style>